@import '../../../stylesheet/mixin.scss';
@import '../../../stylesheet/default.scss';
@import '../../../stylesheet/color/gradientColor.scss';
@import '../../../stylesheet/color/customGradients.scss';

$name: m-gradientsBar;


.#{$name}-default{
    display: inline-block;
		z-index: $bubble-level;
		position: relative;
}

.#{$name}-alert-default{
    @include flex_average;
    @include box($gradientsBar-alert-width, $gradientsBar-alert-height);
    @include transition(transform 500ms ease);
		@include transform(translateY(-60px));
		@include box(100vw, 60px);
		position: absolute;
		top: 0;left: 0;
		z-index: $gradientsBar-level;
}

.#{$name}-alert-vision {
    @include transform(translateY(0px));
}

.#{$name}-alert-hidden {
    @include transform(translateY(-60px));
}

// danger
.#{$name}-alert-danger{
    @extend .m-gradients-StrongBliss;
}

// warning
.#{$name}-alert-notice{
    @extend .m-gradients-JustMorning;
}
//success

.#{$name}-alert-success{
    @extend .m-gradients-HealthyWater;
}

//information
.#{$name}-alert-information{
    @extend .m-gradients-CrystalRiver;
}

//like
.#{$name}-alert-like{
    @extend .m-gradients-StrongBliss;
}


.#{$name}-alert-inner{
    @include minBox(85%, 40px);
    position: relative;
    display: inline-flex;
    align-items: center;
		color: $font-default-color-white;

    .#{$name}-alert-cancel{
        @include box(20px, 20px);
        background-image: url($gradientsBarAlertCancel);
        background-size: cover;
        position: absolute;
        right: 20px;
    }

    .m-icon-default{
        margin:0 20px;
    }
    .m-gradientsBar-alert-content{
        word-wrap: break-word;
    }
}
